<template>
	<!--考勤记录-->
	<div class="workdatereords">
		<div class="search-layout">
			<div><span>姓名检索</span><Input v-model="value" placeholder="输入姓名" style="width: 10vw;margin-left: 1vw;" class="carplate"/></div>
			<div><span>开始时间</span><DatePicker type="date" placeholder="" style="width: 10vw;margin-left: 1vw;" class="stime"></DatePicker></div>
			<div><span>结束时间</span><DatePicker type="date" placeholder="" style="width: 10vw;margin-left: 1vw;" class="etime"></DatePicker></div>
			<Button type="primary" icon="ios-search" class="finddata">开始查询</Button>
		</div>
		<Table disabled-hover :columns="columns1" :data="data1" class="infodatas" size="small"></Table>
		<Page :total="total" class="car-page" @on-change="onchange"/>
	</div>
</template>

<script>
	import worddaterecordinfo from '@/components/worddaterecordinfo.vue'
	export default {
		components: { worddaterecordinfo },
		name: "workdatereords",
		data() {
			return {
				total:20,
				columns1:[
					{
						title: '部门',
						key: 'dpt'
					},
					{
						title: '姓名',
						key: 'name'
					},
					{
						title: '电话',
						key: 'mobile'
					},
					{
						title: '迟到天数',
						key: 'latercount'
					},
					{
						title: '未到天数',
						key: 'offlinecount'
					},
					{
						// title: '详情',
						type: 'expand',
						width: 50,
						heigh:5,
						render: (h, params) => {
							return h(worddaterecordinfo,{
								props: {
									row: params.row
								}
							})
						}
					}
				],
				data1:[],
				value:'',
			}
		},
		mounted() {
			this.data1.push({"dpt":"研发部","name":"张飞1","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞2","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞3","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞4","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞5","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞6","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞7","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞8","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞9","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
			this.data1.push({"dpt":"研发部","name":"张飞10","mobile":"13999996548","latercount":"10","offlinecount":"3","date":"2019-07-20","intime":"09:30","outtime":"0","url":"http://2.pic.pc6.com/thumb/up/2014-8/201482292614_128_128.jpg"})
		},
		computed: {},
		watch: {},
		methods: {
			onchange(index){
				console.log(index);
			}
		},
		props: []
	}
</script>

<style scoped lang="less">
	@import '../assets/less/uiless.less';
	.workdatereords{
		box-sizing: border-box;
		width: inherit;
		height: inherit;
		padding: @component-padding;
		.search-layout{
			display: flex;
			align-items: center;
			height: 7vh;
			span {
				.search_layout_span();
			}
		}
		/*.infodatas:nth-child(1):nth-child(2):nth-child(1):nth-last-child(1) td{*/
			/*height: 2vh!important;*/
		/*}*/
		.car-page{
			margin-top: 1vh;
		}
		.finddata{
			margin-left: 1vw;
		}
	}
</style>
